<template>
  <KunkkaEditableTable
    ref="KunkkaEditableTable"
    :name="name"
    :handle="handle"
    :columns="columns"
    :data="data"
    :rules="rules"
    hasrightclickmenu
    @cellClick="cellClick"
    @srmDownloadFile="srmDownloadFile"
  />
</template>

<script>
export default {
  data() {
    return {
      name: 'demo',
      columns: [
        {
          label: '工22号',
          prop: 'id',
          type: 'input',
          // disabled: true,
          show: true,
          placeholder: '123123'
        },
        {
          label: 'name',
          prop: 'name',
          type: 'span',
          show: true
        },
        {
          label: '类型',
          prop: 'type',
          type: 'select',
          optionlist: [
            {
              cKeyname: '类型1',
              cKeynumb: 'lx1'
            },
            {
              cKeyname: '类型2',
              cKeynumb: 'lx2'
            }
          ],
          show: true
        },
        {
          label: '时间日期',
          prop: 'datetime',
          type: 'datetime',
          show: true
        },
        {
          label: '搜索框',
          prop: 'inputSearch',
          type: 'inputSearch',
          handle: '/inputSearch',
          show: true
        },
        {
          label: '附件',
          prop: 'upload',
          type: 'srmDownloadFile',
          show: true
        }
      ],
      handle: [
        {
          label: '自定义按钮'
        }
        // {
        //   label: '新增'
        // },
        // {
        //   label: '删除'
        // },
        // {
        //   label: '复制'
        // }
      ],
      rules: {
        id: [{ required: true, message: '请填写工号', trigger: 'blur' }],
        name: [{ required: true, message: '请填写姓名', trigger: 'change' }],
        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
        datetime: [{ required: true, message: '请填写值', trigger: 'change' }]
      },
      data: [
        {
          id: '',
          name: '张三',
          type: 'lx1',
          datetime: '2021-01-01 08:00:00',
          inputSearch: '查询1',
          upload: 'http://speed.hetzner.de/100MB.bin?asfasfasfsafasfasfasfasfasfafszf'
        },
        {
          id: '002',
          name: '李四',
          type: 'lx2',
          datetime: '2021-12-12 08:00:00',
          inputSearch: '查询2',
          upload: 'http://speed.hetzner.de/100MB.bin'
        }
      ],
      timelineList: null,
      rightComplete: false,
      leftComplete: false
    }
  },
  mounted() {
    // 新增复制删除的按钮去重
    for (let i = this.handle.length - 1; i >= 0; i--) {
      if (
        this.handle[i].label === '新增' ||
        this.handle[i].label === '复制' ||
        this.handle[i].label === '删除'
      ) {
        this.handle.splice(i, 1)
      }
    }
  },
  methods: {
    cellClick(row) {
      this.$refs['KunkkaEditableTable'].setCurrentRow(row)
    },
    srmDownloadFile(row) {
      console.log(row)
    }
  }
}
</script>
<style lang="scss">
.Kunkka-collapse-form {
  .el-form-item--mini.el-form-item {
    margin-bottom: 0;
  }
}
</style>
